<template>
  <div class="mobiellogin">
    <div>
      <div style="width: 12rem; min-width: 800px">
        <div class="mobiellogin_logo"></div>
      </div>
      <!-- 验证码登录 -->
      <div v-if="!isScanning" class="mobiellogin_content">
        <div v-if="avtrShow" class="avtr">
          <div class="progress"></div>
          <img src="../../../assets/images/13@2x (1).png" alt="" />
          <div class="sucess"></div>
        </div>
        <div v-else class="logo">
          <img src="../../../assets/images/logo.png" alt="" />
        </div>
        <div class="title">欢迎登录</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="phone">
            <el-row class="user" type="flex" align="middle">
              <el-input
                v-model.number="ruleForm.phone"
                placeholder="请输入手机号"
              ></el-input>
              <div
                v-if="ruleForm.phone"
                class="clear"
                @click="ruleForm.phone = ''"
              ></div>
            </el-row>
          </el-form-item>
          <el-form-item prop="password">
            <el-row
              class="password"
              type="flex"
              justify="space-between"
              align="middle"
            >
              <el-input
                :type="isType ? 'password' : 'text'"
                style="width: 80%"
                v-model.trim="ruleForm.password"
                placeholder="请输入密码"
              ></el-input>
              <div class="eye" v-if="isType" @click="isType = !isType"></div>
              <div class="eyes" v-else @click="isType = !isType"></div>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="space-between">
              <el-button
                :loading="loading"
                :style="{ opacity: submitStaus }"
                class="submit"
                @click="submit('ruleForm')"
                >登录</el-button
              >
              <!-- <div :style="{opacity:submitStaus}" class="submit" @click="submit('ruleForm')">登录</div> -->
              <!-- <div class="scode" @click="toScanning">
                <img src="../../../assets/images/组 18@2x.png" alt="">
              </div> -->
            </el-row>
          </el-form-item>
        </el-form>
        <div class="mode">
          <div>
            <span>
              <router-link to="/mobileLogin"> 验证码登录 </router-link>
            </span>
            <span>|</span>
            <span @click="handleRegister"> 注册 </span>
          </div>
          <span>
            <router-link to="/seekPassword"> 忘记密码? </router-link>
          </span>
        </div>
      </div>
      <!-- 微信扫码 -->
      <div v-else class="mobiellogin_content">
        <!-- <div class="scanning"></div> -->
        <iframe
          ref="iframeRef"
          class="code-iframe"
          sandbox="allow-scripts allow-top-navigation"
          scrolling="no"
          :src="wxCode"
        >
        </iframe>
        <!-- <div class="wecat-txet">
          <p>请使用微信扫描二维码登录「 家巴啦商户平台 」</p>
        </div> -->
        <div class="scanning-mode">
          <span>
            <router-link to="/mobileLogin"> 短信登录 </router-link>
          </span>
          <span>|</span>
          <span @click="isScanning = false">密码登录</span>
          <span>|</span>
          <span @click="handleRegister"> 注册 </span>
        </div>
      </div>
    </div>
    <jblFooter />
  </div>
</template>

<script>
import md5 from "js-md5";
import jblFooter from "@/views/login/compoents/jblFooter";
import { selectOrgList, selectOrgAuditList, selectAllList } from "@/api/common";
import {
  password,
  scanLogin,
  getRedirectUrl,
  getAccessToken,
  getUserInfo,
  wxBind,
  sendCode,
} from "@/api/user";
export default {
  name: "Password",
  components: {
    jblFooter,
  },
  inject: ["reload"],
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      redirect: undefined,
      otherQuery: {},
      wxCode: "",
      isScanning: false,
      isType: true, // 密码type
      ruleForm: {
        phone: "",
        password: "",
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: "change" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  watch: {
    $route: {
      handler: function (route, from) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  computed: {
    submitStaus() {
      return this.ruleForm.phone && this.ruleForm.password ? 1 : 0.5;
    },
    avtrShow() {
      return this.ruleForm.phone && this.ruleForm.password;
    },
  },
  beforeRouteLeave(to, form, next) {
    // this.isScanning = false
    next();
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },
  methods: {
    async wxLogin() {
      const { data } = await getAccessToken({
        code: this.$store.getters.wxCode,
      });
      const { accessToken, openId } = data;

      const userInfo = await getUserInfo({
        openId: openId,
        accessToken: accessToken,
      });
      const res = await scanLogin({
        unionId: userInfo.data.unionId,
        thirdAppId: userInfo.data.thirdAppId,
        openId: userInfo.data.openId,
        bindType: userInfo.data.bindType,
      });
      await this.$store.dispatch("user/login", res.data);
      const busiesList = await selectAllList();
      if (res.data.auditStatus === 2) {
        await this.$store.dispatch("user/changeRoles", busiesList.data[0]);
        this.$router.push("/home");
      } else {
        this.$router.push("/register");
      }
      console.log(userInfo, "userInfo");
    },
    async submit(formName) {
      let confirm = false;
      this.$refs.ruleForm.validate((valid) => {
        // this.$router.push('/rest')
        if (valid) {
          this.loading = true;
          confirm = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      if (!confirm) return;

      const res = await password({
        phone: String(this.ruleForm.phone),
        // password: this.ruleForm.password
        password: md5(this.ruleForm.password),
      }).finally(() => {
        this.loading = false;
      });
      await this.$store.dispatch("user/login", res.data);
      const busiesList = await selectAllList();
      TDAPP.onEvent("密码登录");
      if (res.data.auditStatus === 2) {
        await this.$store.dispatch("user/changeRoles", busiesList.data[0]);
        this.$router.push("/home");
      } else {
        this.$router.push("/register");
      }
      await selectOrgList({ phone: this.ruleForm.phone }).then((res) => {
        console.log(res);
      });
    },
    toScanning() {
      this.isScanning = true;
      getRedirectUrl().then((res) => {
        this.wxCode = `${res.data}&self_redirect=false`;
      });
    },
    handleRegister() {
      this.$store.dispatch("user/resetToken");
      this.$router.push("/register");
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    keyDown(e) {
      // 如果是回车则执行登录方法
      if (e.keyCode === 13) {
        this.submit("ruleForm");
      }
    },
  },
  // 离开当前页面后执行
  destroyed: function () {
    window.removeEventListener("keydown", this.keyDown, false);
    this.$store.dispatch("user/removewxUserInfo");
  },
};
</script>
<style lang="scss" scoped>
.mobiellogin {
  width: 100%;
  min-width: 1000px;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  background: rgba(247, 248, 252, 1);
  opacity: 1;
  &_logo {
    margin: 80px 0 20px;
    width: 220px;
    height: 54px;
    background-image: url("../../../assets/images/jbllogo.png");
    background-size: 100% 100%;
    background-position: center;
  }
  &_content {
    width: 12rem;
    min-width: 800px;
    height: 692px;
    border-radius: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    .avtr {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      .progress {
        z-index: 1;
        position: absolute;
        top: 0;
        width: 130px;
        height: 130px;
        background: linear-gradient(45deg, #b6f3ff 0%, #16dbcc 100%);
        border-radius: 50%;
        animation: prog 2s ease-in-out 0s infinite alternate;
      }
      @keyframes prog {
        from {
          transform: rotateZ(0deg);
        }
        to {
          transform: rotateZ(360deg);
        }
      }
      // {
      //   from {background: rgb(255, 255, 255);}
      //   to {background: rgba(22,219,204,1);;}
      // }
      // {
      //   from {background: linear-gradient(0deg,rgb(229, 255, 253),rgb(255, 255, 255));}
      //   to {background: linear-gradient(90deg,rgba(22,219,204,1),rgba(22,219,204,1),rgb(138, 255, 245));}
      // }
      .shadow {
        z-index: 15;
        top: -10px;
        width: 130px;
        height: 130px;
        background: radial-gradient(
          circle at top right,
          rgba(22, 219, 204, 1),
          rgba(22, 219, 204, 1),
          rgb(138, 255, 245)
        );
        // background: linear-gradient(0deg,rgba(22,219,204,1),rgba(22,219,204,1),rgb(138, 255, 245));
        opacity: 1;
      }
      img {
        position: absolute;
        z-index: 10;
        width: 124px;
        height: 124px;
      }
      .sucess {
        position: absolute;
        z-index: 10;
        bottom: 3px;
        right: 10px;
        width: 24px;
        height: 24px;
        background-image: url("../../../assets/images/组 3380@2x.png");
        background-size: 24px 24px;
        background-position: center;
      }
    }
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      margin: 20px 0 38px;
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(78, 92, 101, 1);
      opacity: 1;
    }
    .user {
      width: 432px;
      height: 70px;
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border-radius: 8px;
    }
    .password {
      width: 432px;
      height: 70px;
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border-radius: 8px;
      .eye {
        margin-right: 23px;
        width: 24px;
        height: 24px;
        background-image: url("../../../assets/images/组 3379@2x.png");
        background-size: 24px 24px;
        background-position: center;
        transition: all 0.2s ease-in;
      }
      .eyes {
        margin-right: 23px;
        width: 24px;
        height: 24px;
        background-image: url("../../../assets/images/eyes.png");
        background-size: 24px 24px;
        background-position: center;
        transition: all 0.2s ease-in;
      }
    }
    /deep/.el-input__inner {
      height: 70px;
      font-size: 24px;
      font-family: SF UI Display;
      font-weight: bold;
      color: rgba(78, 92, 101, 1);
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border: none;
      border-radius: 8px;
      &::-webkit-input-placeholder {
        /* WebKit browsers */
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(217, 220, 227, 1);
      }
    }
    .submit {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 432px;
      height: 70px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      background: #16dbcc;
      opacity: 0.5;
      box-shadow: 0px 10px 25px rgba(22, 219, 204, 0.15);
      border-radius: 8px;
      transition: 0.7s ease-in-out;
    }
    .scode {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70px;
      height: 70px;
      background: rgba(220, 250, 248, 1);
      opacity: 0.5;
      border-radius: 8px;
      img {
        width: 37px;
        height: 37px;
        object-fit: cover;
      }
    }
  }
  .mode {
    display: flex;
    justify-content: space-between;
    width: 432px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #4e5c65;
    opacity: 1;
    > span {
      color: #16dbcc;
    }
    span {
      cursor: pointer;
    }
    span:nth-of-type(2) {
      margin: 0 30px;
    }
  }
  .scanning {
    width: 220px;
    height: 220px;
    background-image: url("../../../assets/images/商户端PC端-登录账户-扫码@2x.png");
    background-repeat: no-repeat;
    background-size: 220px 220px;
    background-position: center;
  }
  .wecat-txet {
    width: 288px;
    text-align: center;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 36px;
    color: rgba(78, 92, 101, 1);
    opacity: 1;
  }
  .scanning-mode {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(179, 185, 199, 1);
    opacity: 1;
    span {
      cursor: pointer;
    }
    span:nth-of-type(2),
    span:nth-of-type(4) {
      margin: 0 30px;
    }
  }
  .clear {
    cursor: pointer;
    margin-right: 20px;
    width: 28px;
    height: 25px;
    background-image: url("../../../assets/images/组 19@2x.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: center;
  }
  .code-iframe {
    width: 300px;
    height: 400px;
    border: none;
    overflow-y: hidden;
  }
}
</style>
